<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展运算符</title>

    <script>
        // 代码 1 扩展运算符能拆开数组变为序列
        console.log([1,2,3,4,5]) // Array(5) [1, 2, 3, 4, 5]
        console.log(1,2,3,4,5) // 1 2 3 4 5
        // 与 console.log(1,2,3,4,5)等价
        console.log(...[1,2,3,4,5]) // 1 2 3 4 5

        // 代码 2 扩展运算符常用于将数组转为函数的参数序列
        let arr = [ ];
        let args = [1,2,3];
        // 不使用扩展运算符，只能自己将数组拆分成单个元素或使用 apply 方法
        // 1. arr.push(args[0], args[1], args[2]);
        // 2. Array.push.apply(arr, args);
        arr.push(...args); // 等价于 arr.push(1,2,3)
        console.log(arr); // Array(3) [1, 2, 3]

        // 代码 3 扩展运算符可以将拆开的序列插入数组中间
        console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
        // 所以扩展运算符常用于合并数组
        let arr1 = [1, 2];
        let arr2 = [3, 4];
        // 等价于 arr1.concat(arr2)
        let all = [...arr1, ...arr2];
        console.log(all); // Array(4) [1, 2, 3, 4]

        // 可以作用于表达式的结果
        console.log(...(1 > 0 ? [1, 2, 3] : [4, 5, 6])); // 1 2 3
        // 空数组，不产生效果第 2 章 ECMAScript 6 扩展
        onsole.log([...[], 1]); // [1]

        // 代码 4 rest 参数是扩展运算符的逆运算，作用是组装剩余参数为新数组
        function restFunc(array, ...items) {
        console.log(items);
        }
        restFunc(1, 2, 3, 4) // Array(3) [2, 3, 4]
        // 剩余运算符也是扩展运算符的逆运算，作用是组装剩余元素为新数组
        let [x, y, ...z] = arr;
        console.log(x, y, z); // 1 2 [3, 4, 5]
        </script>
</head>
<body>
    
</body>
</html>